<template>
  <div>
    <nav-bar title="区域出勤统计">
    </nav-bar>
    <div class="maxinBox backgroundfff">
      <van-dropdown-menu>
        <van-dropdown-item v-model="classGroup" :options="teamList" @change="getAreaList" />
        <van-dropdown-item v-model="workType" :options="workTypeList" @change="getAreaList" />
        <van-dropdown-item v-model="status" :options="statusList" @change="getAreaList" />
      </van-dropdown-menu>
      <van-row class="team" v-for="(item, index) in dataList" :key="index">
        <van-checkbox-group v-model="result">
          <van-col :span="2" style="margin-top: 1.25rem;" v-if="status === 0 && teamDate === dates">
            <van-checkbox :name="item.checkId" ref="checkboxes" />
          </van-col>
          <van-col :span="5">
            <img style="width: 80%" :src="item.headUrl" alt="" @click="bigAvatar(item.headUrl)">
          </van-col>
          <van-col :span="17">
            <van-row>
              <van-col :span="15">
                <div style="color: #666;" class="fontSize14">{{item.builderName}} ({{item.mobile}})</div>
                <div style="color: #666;" class="fontSize14 marginTop5">{{item.teamName}} {{item.workTypeName}}</div>
              </van-col>
              <van-col :span="9">
                <div style="color: #666;line-height: 3.75rem;color: #225FBA;text-align: right;" class="fontSize14">
                  <span style="color: #F43530;" v-if="item.exceptionType === 0">已签到</span>
                  <span v-else-if="item.exceptionType === 1">签到延迟</span>
                  <span v-else>擅离岗位</span>
                </div>
              </van-col>
            </van-row>
          </van-col>
        </van-checkbox-group>
      </van-row>
    </div>
    <van-dialog v-model="show" title="异常描述 " show-cancel-button @confirm="onClick">
      <van-cell-group>
        <van-field style="padding: 0.9375rem;" v-model="desc" type="textarea" placeholder="请输入用户名" />
      </van-cell-group>
    </van-dialog>
    <div class="rote" v-if="status === 0 && teamDate === dates">
      <van-row style="padding: 0.625rem 0.9375rem;">
        <van-col :span="12">
          <span>已选{{result.length}}人</span>
        </van-col>
        <van-col :span="12" class="fontSize14" style="text-align: right;color: #225fba;" @click="onSave">
          <span>标记未异常</span>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  import {ImagePreview} from 'vant'
  import teamAPI from '../../../../api/workAPI/teamAPI.js'
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  import moment from 'moment'
  export default {
    data() {
      return {
        desc: '',
        show: false,
        teamDate: localStorage.getItem('teamDate'),
        dates: moment(new Date()).format('YYYY-MM-DD'),
        result: [],
        classGroup: '',
        workType: '',
        status: 0,
        workTypeList: [],
        teamList: [],
        statusList: [
        {
          text: '已签到',
          value: 0
        },
        {
          text: '异常',
          value: 1
        }],
        dataList: []
      }
    },
    methods:{
      // 放大图片
      bigAvatar(img) {
        ImagePreview({
           images: [img],
        })
      },
      onSave() {
        this.show = true
      },
      // 标记异常
      onClick() {
        let projectId = localStorage.getItem('projectId')
        let data = {
          checkIdList: this.result,
          remark: this.desc
        }
        teamAPI.submitErr(projectId, data).then(res => {
          this.$toast.success('标记成功')
          this.getAreaList()
        })
      },
      // 查询未签到列表
      getAreaList() {
        let projectId = localStorage.getItem('projectId')
        let data = {
          pageSize: 500,
          pageNum: 1,
          checkPointId: JSON.parse(localStorage.getItem('teamDetails')).checkPointId,
          team: this.classGroup,
          workType: this.workType,
          inspectFlag: this.status,
          date: this.teamDate
        }
        teamAPI.getAreaList(projectId, data).then(res => {
          this.dataList = res.list
        })
      },
      // 查询班组列表
      getClassGroup() {
        dashbordAPI.getClassGroup().then(res => {
          this.teamList = res.data.map(item => {
            return {
              text: item.dictLabel,
              value: item.dictCode
            }
          })
          this.teamList.unshift({
            text: '全部班组',
            value: ''
          })
        })
      },
      // 查询工种列表
      getWorkType() {
        this.workTypeList.unshift({
          text: '全部工种',
          value: ''
        })
        dashbordAPI.getWorkType().then(res => {
          this.workTypeList = res.data.map(item => {
            return {
              text: item.dictLabel,
              value: item.dictCode
            }
          })
          this.workTypeList.unshift({
            text: '全部工种',
            value: ''
          })
        })
      }
    },
    mounted() {
      this.getAreaList()
      this.getWorkType()
      this.getClassGroup()
    }
  }
</script>

<style scoped lang="scss">
  .team{
      padding: 0.9375rem;
      font-size: 0.875rem;
      border-bottom: 0.0625rem solid #E5E5E5;
      .van-col--7{
        img{
          width: 100%;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .rote{
      background-color: #fff;
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
    }
</style>
